<template>
  <div v-if="articleList">
    <!--文章展示区域-->
    <el-card shadow="always" v-for="item in articleList" :key="item.id">
      <div class="user">
        <el-avatar :size="30" :src='item.user.headimg'></el-avatar>
        <div class="user-info">
          <!--昵称-->
          <a href="./" class="nickname">{{ item.user.nick }}</a>
          <!--等级-->
          <a href="./">
            <el-tag class="lv" size="mini" effect="dark" v-text="'LV.' + item.user.lv"></el-tag>
          </a>
          <!--时间-->
          <time class="time" v-text="$date.diffTime(item.creat_time)"></time>
        </div>
      </div>
      <div class="cloudN-content-pre">
        <!--标签-->
        <el-tag size="mini" type="primary" effect="dark" class="cloudN-content-head-tag"
                v-show="item.content.tag_name">{{ item.content.tag_name }}
        </el-tag>
        <!--正文标题-->
        <a :href="'/essay/content' + '?articleid=' + item.content.article_id" @click="viewArticle(item.content.article_id)">
          <h1 :title="item.title" class="cloudN-content-head" :class="{noneHeadTag:item.content.tag_name===''}">
            {{ item.content.title }}</h1>
        </a>
      </div>
      <a :href="'/essay/content' + '?articleid=' + item.content.article_id" @click="viewArticle(item.content.article_id)">
        <!--正文内容-->
        <div class="cloudN-center-content-text">{{ item.content.part_content }}</div>
      </a>
      <!--图片展示区域-->
      <div style="display: flex" :class="{multy:item.content.image.length===3}">
        <div v-for="(img,index) in item.content.image" :key="index">
          <el-image class="cloudN-content-text-pic" v-if="index<3" :src="img" fit="contain"
                    :preview-src-list="item.content.image">
            <!--加载中-->
            <div slot="placeholder" class="cloudN-content-text-pic-status">
              <i class="el-icon-loading"></i>
            </div>
            <!--加载失败-->
            <div slot="error" class="cloudN-content-text-pic-status">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
      </div>
      <div class="more-content-pic">
        <font-awesome-icon :icon="['far', 'clone']"></font-awesome-icon>
        <span>+13</span>
      </div>
      <!--文章底部操作区域-->
      <div class="cloudN-content-tag-operators" :class="{ active: item.content.custom_tag !== null }">
        <!--标签区域-->
        <div class="cloudN-tag" v-show="item.content.custom_tag !== null">
          <el-tag class="customLabel" type="info" size="mini" v-for="(tag,index) in item.content.custom_tag"
                  :key="index">{{ tag }}
          </el-tag>
        </div>
        <!--显示观看人数，点赞人数，评论人数区域-->
        <div class="operators">
          <div>
            <font-awesome-icon :icon="['far', 'eye']" style="width:16px;height: 16px"></font-awesome-icon>
            <span>{{ item.article_opeartor.view_count }}</span></div>
          <div>
            <font-awesome-icon @click="goComment('/essay/content' + '?articleid=' + item.content.article_id)" :icon="['far', 'comment-dots']" style="width:16px;height: 16px"></font-awesome-icon>
            <span>{{ item.article_opeartor.comment_count }}</span></div>
          <div>
            <font-awesome-icon v-if="!item.article_opeartor.isLike" @click="like(item.content.article_id)" :icon="['far', 'thumbs-up']" style="width:16px;height: 16px"></font-awesome-icon>
            <font-awesome-icon v-else @click="like(item.content.article_id)" :icon="['far', 'thumbs-up']" style="width:16px;height: 16px;color: #00c3ff"></font-awesome-icon>
            <span>{{ item.article_opeartor.fabulous_count }}</span></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'

export default {
  data: () => ({}),
  created () {
    if (window.location.href === 'http://localhost/center/collection') {
      // this.reload('http://localhost/center/collection')
    }
  },
  // DOM对象加载完成时
  mounted () {},
  methods: {
    ...mapMutations('HomePage', {
      subArticleActionListFabulousCount: 'subArticleActionListFabulousCount',
      addArticleActionListFabulousCount: 'addArticleActionListFabulousCount',
      reverseArticleActionListConfigFabulousCount: 'reverseArticleActionListConfigFabulousCount'
    }),
    // 点赞、取消赞
    like: function (articleId) {
      var data = {}
      // 去articleActionList找到对应的articleId,找到后将文章id，是否点赞
      console.log(this.articleActionList)
      this.articleActionList.forEach(item => {
        if (item.id === articleId) {
          data.articleId = item.id
          data.operation = item.isLike ? 1 : 0
        }
      })
      const url = this.$config.urls.get('like_behavior')
      this.$memory.getEquipmentId().then(equipmentId => {
        return new Promise((resolve, reject) => {
          this.$http.post(url, { equipment_id: equipmentId, article_id: data.articleId, type: 0, operation: data.operation }).then((d) => {
            resolve(d)
          }).catch((e) => {
            reject(e)
          })
        })
      }).catch(e => {
        return new Promise((resolve, reject) => {
          reject(e)
        })
      }).then(d => {
        if (d.data.code === 0) {
          if (data.operation === 1) {
            this.subArticleActionListFabulousCount(data.articleId)
          } else {
            this.addArticleActionListFabulousCount(data.articleId)
          }
          this.reverseArticleActionListConfigFabulousCount(data.articleId)
        } else {
          console.log(d)
          this.$message.error(d.data.error_message)
        }
      }).catch((e) => {
        console.log(e)
      })
    },
    // 评论
    goComment (href) {
      this.$router.push(href)
      // this.sleep(1000)
      setTimeout(function () {
        document.querySelector('.article-operator-report').scrollIntoView(
          {
            behavior: 'smooth', // 平滑过渡
            block: 'start' // 上边框与视窗顶部平齐
          })
      }, 200)
    },
    // 点击文章事件
    viewArticle (Param) {
      var url = this.$config.urls.get('view_article_behavior')
      return this.$memory.getEquipmentId().then(equipmentId => {
        return new Promise((resolve, reject) => {
          this.$http.post(url, {
            equipment_id: equipmentId,
            article_id: Param,
            is_click: 1
          }).then((d) => {
            if (d.code === 0) { console.log('观看成功') }
            // console.log(ids)
            resolve(d)
          }).catch((e) => {
            reject(e)
          })
        })
      }).catch(e => {
        return new Promise((resolve, reject) => {
          reject(e)
        })
      })
    }
  },
  computed: {
    ...mapGetters('HomePage', { articleActionList: 'articleActionList', articleList: 'articleList' })
  },
  destroyed () {},
  watch: {
  },
  name: 'articleDisplay'
}
</script>

<style lang="less" scoped>

.user {
  display: flex;

  .user-info {
    padding-top: 4px;

    .nickname {
      font-family: "微软雅黑", Arial, sans-serif;
      font-size: 14px;
      font-weight: 550;
      letter-spacing: -1px;
      color: #999999;
      margin-left: 5px;
    }

    .lv {
      margin: 0 8px;
      background-color: #ffbf00;
      border-color: #ffbf00;
    }

    .time {
      color: #999999;
    }
  }
}

.cloudN-content-head-tag {
  font-size: 12px;
  margin-left: 0;
}

.cloudN-content-head {
  display: inline;
  font-size: 15px;
  line-height: 20px;
  font-weight: 900;
  font-family: "微软雅黑", Arial, sans-serif;
  color: #303133;
}

.cloudN-content-text-pic {
  width: 220px;
  height: 135px;
}

.multy {
  justify-content: space-between;
}

.cloudN-content-text-pic-status {
  display: flex;
  justify-content: space-around;

  .el-icon-picture-outline {
    font-size: 100px;
    color: #999;
    transform: translateY(15%);
  }
}
.more-content-pic {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  top: 100px;
  right: 15px;
  //background-color: #999999;
  padding: 2px;
  color: #fff;
  border-radius: 15%
}

.noneHeadTag {
  margin-left: 0;
}

.active {
  display: flex;
  justify-content: space-between;
}

.operators {
  display: flex;
  color: #999999;

  div {
    margin: 0 5px
  }

  span {
    margin-left: 5px;
  }
}

.el-tag--mini {
  height: 20px;
  padding: 0 2px;
  line-height: 19px;
}
</style>
